import React, { Component } from 'react'
import styles from './index.module.scss'
import classnames from 'classnames'
import ctx from '@/assets/js/ctx'
import {withRouter} from 'react-router-dom'
@withRouter

class ItemWarp extends Component {
    static contextType = ctx

    toVideoPage = (videoId) => {
        this.props.history.push('/videoPage/' + videoId)
        
    }   
    render() {
        const {commonUrl} = this.context
        const {itemInfo} = this.props
        const {toVideoPage} = this
        return (
            <div className={styles.itemWarp} onClick={() => toVideoPage(itemInfo.aid)}>
                <div className={styles.imgContainer}>
                    <img className={styles.itemImg} src={commonUrl + itemInfo.pic} alt="又找不到图片" />
                    <div className={styles.imgCover} >
                        <div className={styles.playWarp}>
                            <i className={classnames('iconfont','icon-bofangshu',styles.iconWarp)}></i>
                            <span>{(itemInfo.play/10000).toFixed(1)}万</span>
                        </div>
                        <div className={styles.viewWarp}>
                            <i className={classnames('iconfont','icon-danmushu',styles.iconWarp)}></i>
                            <span>{itemInfo.video_review}</span>
                        </div>
                    </div>                    
                </div>
                <p className={classnames('ellipsis2',styles.title)}>{itemInfo.title}</p>
            </div>
        )
    }
}

export default ItemWarp
